<template>
  <div class="homePage" v-if="allFlag">
    <div class="bg">
      <van-uploader :after-read="afterRead">
        <img :src="information.userBg" class="auto-img" />
      </van-uploader>
    </div>
    <div class="synopsis">
      <div class="my">
        <div class="headPhoto">
          <div class="icon">
            <img :src="information.userImg" class="auto-img" />
          </div>
          <div class="nameText">
            <div class="name">
              {{ information.nickName }}
              <span class="nameIcon">
                <img src="../assets/images/qt.png" class="auto-img" />
              </span>
            </div>
            <div class="rank">青铜会员</div>
          </div>
        </div>
        <div class="detail">
          <div class="synopsi">{{ descContent }}</div>
          <div class="caffeeWallet">
            <div class="num">2</div>
            <div class="text">咖啡钱包</div>
          </div>
          <div class="onSale">
            <div class="num">1</div>
            <div class="text">星礼卡</div>
          </div>
          <div class="integral">
            <div class="num">35</div>
            <div class="text">积分兑换</div>
          </div>
        </div>
        <div class="redPacket" v-if="redPacketFlag">
          <div class="redPacketIcon">
            <img src="../assets/images/tongzhi.png" class="auto-img" />
          </div>
          <div class="redPacketText">你有一个新的红包可领取</div>
          <div class="closeIcon">
            <img
              src="../assets/images/remove.png"
              class="auto-img"
              @click="remove"
            />
          </div>
        </div>
      </div>
      <div class="other">
        <div
          class="idContent"
          v-for="(item, index) in ContentArr"
          :key="index"
          @click="show(index)"
        >
          <div class="otherIcon">
            <img :src="item.leftUrl" class="auto-img" />
          </div>
          <div class="otherText">{{ item.title }}</div>
          <div class="rigthIcon">
            <img :src="item.rightUrl" class="auto-img" />
          </div>
        </div>
      </div>
      <div class="bottomImg"></div>
    </div>
    <!-- 优惠券列表 -->
    <van-popup
      v-model="showList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px"
    >
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>
  </div>
</template>

<script>
import { coupon } from "../assets/js/showList";
import { disble } from "../assets/js/disCoupon";
export default {
  name: "My",
  data() {
    return {
      redPacketFlag: true,
      // 显示优惠券列表
      showList: false,
      allFlag: true,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [disble],
      // 显示个人信息
      information: [],
      descContent: "",
      // 遍历功能版
      ContentArr: [
        {
          title: "个人中心",
          leftUrl: require("../assets/images/nameId.png"),
          rightUrl: require("../assets/images/right.png"),
        },
        {
          title: "优惠券",
          leftUrl: require("../assets/images/giftPlus.png"),
          rightUrl: require("../assets/images/right.png"),
        },
        {
          title: "我的订单",
          leftUrl: require("../assets/images/dingdan.png"),
          rightUrl: require("../assets/images/right.png"),
        },
        {
          title: "我的收藏",
          leftUrl: require("../assets/images/like.png"),
          rightUrl: require("../assets/images/right.png"),
        },
        {
          title: "我的收货地址",
          leftUrl: require("../assets/images/placePlus.png"),
          rightUrl: require("../assets/images/right.png"),
        },
        {
          title: "安全中心",
          leftUrl: require("../assets/images/aq.png"),
          rightUrl: require("../assets/images/right.png"),
        },
      ],
    };
  },
  computed: {
    ifCounpon() {
      return this.$store.state.coupon;
    },
  },
  methods: {
    remove() {
      this.redPacketFlag = false;
    },
    show(index) {
      switch (index) {
        case 0:
          this.$router.push({ name: "PersonalData" });
          break;
        case 1:
          this.showList = true;
          break;
        case 2:
          this.$router.push({ name: "MyOrder" });
          break;
        case 3:
          this.$router.push({ name: "MyCollect" });
          break;
        case 4:
          this.$router.push({ name: "Site" });
          break;
        case 5:
          this.$router.push({ name: "Safety" });
          break;
      }
    },
    onChange(index) {
      window.sessionStorage.setItem("coupon", index);
      this.showList = false;
      this.chosenCoupon = index;
      if (this.chosenCoupon > -1) {
        window.sessionStorage.setItem("discountsFlag", true);
        this.$store.commit("settDiscounts", this.coupons[0].valueDesc);
      } else {
        window.sessionStorage.removeItem("discountsFlag");
      }
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    // 修改背景图
    afterRead(file) {
      let imgType = file.file.type;
      let serverBase64Img = file.content;
      serverBase64Img = serverBase64Img.replace(
        /^data:image\/[A-Za-z]+;base64,/,
        ""
      );
      imgType = imgType.split("/");
      imgType = imgType.splice(imgType.length - 1, 1).join("");
      this.axios({
        method: "post",
        url: "/updateUserBg",
        data: {
          imgType,
          serverBase64Img,
        },
      })
        .then((res) => {
          if (res.data.code == "I001") {
            this.$toast(res.data.msg);
            this.$router.go(0);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查询我的界面
    getMy() {
      this.axios({
        method: "get",
        url: "/findMy",
      })
        .then((res) => {
          if ((res.data.code = "A001")) {
            this.information = res.data.result[0];
            if (res.data.result[0].desc == "") {
              this.descContent = "这个人很懒,什么都没留下";
            } else {
              this.descContent = res.data.result[0].desc;
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    if (sessionStorage.getItem("token") == null) {
      this.$toast("对不起,请先登录");
      this.allFlag = false;
      setTimeout(() => {
        this.$router.push({ name: "Login" });
      }, 1000);
    } else {
      this.allFlag = true;
      this.getMy();
    }
    if (this.ifCounpon == -1||window.sessionStorage.getItem("useCoupon")) {
      window.sessionStorage.removeItem("discountsFlag");
      this.coupons = [];
    }
    this.axios({
      method: "get",
      url: "/shopcartRows",
    })
      .then((res) => {
        if (res.data.code === 8000) {
          this.typeAllCount = res.data.result;
          this.$store.commit("setCount", res.data.result);
        }
      })
      .catch((err) => {
        console.log(err);
      });
    if (window.sessionStorage.getItem("coupon") == null) {
      this.chosenCoupon = -1;
    } else {
      this.chosenCoupon = Number(window.sessionStorage.getItem("coupon"));
    }
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/base.less");
.bg {
  height: 200px;
  .auto-img {
    height: 200px;
  }
}
.synopsis {
  width: 90%;
  margin: 0px auto;
  transform: translateY(-60px);
  .my {
    padding: 10px 20px;
    background-image: linear-gradient(
      to bottom,
      rgba(253, 249, 249, 0.5) 0px,
      rgba(253, 249, 249, 0.5) 70px,
      #fff 70px
    );
    border-radius: 10px;
    .headPhoto {
      display: flex;
      margin-top: 10px;
      position: relative;
      .icon {
        width: 60px;
        height: 60px;
        overflow: hidden;
        border-radius: 50%;
      }
      .nameText {
        margin-left: 10px;
        margin-top: 10px;
        text-align: center;
        .name {
          font-size: 16px;
          font-weight: bold;
          display: flex;
          .nameIcon {
            display: inline-block;
            height: 25px;
            width: 25px;
            margin-left: 5px;
          }
        }
        .rank {
          height: 20px;
          width: 65px;
          border-radius: 10px;
          text-align: center;
          line-height: 20px;
          margin-top: 8px;
          background-color: #f29b44;
          color: #ffffff;
        }
      }
    }
    .detail {
      display: flex;
      justify-content: space-around;
      padding: 30px 0px;
      margin-top: 20px;
      position: relative;
      .synopsi {
        position: absolute;
        top: 0;
        width: 200px;
        left: 30%;
        font-size: 13px;
      }
      .caffeeWallet {
        font-weight: bold;
        font-size: 12px;
        font-family: STHeiti;
        .num {
          font-size: 18px;
          font-weight: bold;
          text-align: center;
        }
      }
      .onSale {
        font-weight: bold;
        font-size: 12px;
        font-family: STHeiti;
        .num {
          font-size: 18px;
          font-weight: bold;
          text-align: center;
        }
      }
      .integral {
        font-weight: bold;
        font-size: 12px;
        font-family: STHeiti;
        .num {
          font-size: 18px;
          font-weight: bold;
          text-align: center;
        }
      }
    }
    .redPacket {
      display: flex;
      align-items: center;
      padding-top: 10px;
      border-top: 2px solid #bfbfbf;
      .redPacketIcon {
        height: 25px;
        width: 25px;
      }
      .redPacketText {
        margin-left: 20px;
        font-weight: bold;
        font-size: 12.5px;
      }
      .closeIcon {
        margin-left: auto;
        height: 40px;
        width: 40px;
      }
    }
  }
  .other {
    background-color: #fff;
    margin-top: 15px;
    padding: 0px 20px;
    border-radius: 10px;
    .idContent {
      display: flex;
      align-items: center;
      padding-right: 8px;
      border-bottom: 2px solid #bfbfbf;
      height: 50px;
      .otherIcon {
        width: 25px;
        line-height: 30px;
      }
      .otherText {
        margin-left: 20px;
        font-weight: bold;
        font-size: 13px;
      }
      .rigthIcon {
        margin-left: auto;
        height: 20px;
        width: 20px;
        .auto-img {
          height: 100%;
          width: 100%;
        }
      }
      &:last-child {
        border-bottom: 0;
      }
    }
  }
  .bottomImg {
    height: 65px;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 15px;
    background-image: url(../assets/images/bgbt.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0px -30px;
  }
}
</style>